<template>
  <div class="mainV">
    <div class="mainT">
      <i class="el-icon-back" @click="goBack"></i>
      <p>问诊</p>
      <div></div>
    </div>
    <div class="meetV" id="remotetracks"></div>
  </div>
</template>

<script>
import { fetchPost, fetchGet } from '@/api/request'
import QNRTC from "qnweb-rtc";
const client = QNRTC.createClient();
export default {
  data() {
    return {

    }
  },
  mounted() {
    fetchGet('/wz/rtc/wzRtc/getRoomToken', {
      roomName: this.$route.query.roomName,
    }).then(res => {
      this.joinRoom(res);
    })
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    async joinRoom(res) {
      const that = this
      // 创建QNRTCClient对象
      // 需要先监听对应事件再加入房间
      client.on("user-published", this.handleUserPublished);
      if (QNRTC.isBrowserSupported) {
        console.warn("support!");
      } else {
        console.warn("not support!");
      }
      // 测试摄像头采集
      try {
        const track = await QNRTC.createCameraVideoTrack();
      } catch (e) {
        console.warn("camera track not support!");
      }

      // 测试麦克风采集
      try {
        const track = await QNRTC.createMicrophoneAudioTrack();
      } catch (e) {
        console.warn("microphone track not support!");
      }
      const result = await QNRTC.checkSystemRequirements();
      if (result.ok) {
        console.warn("test ok!");
      } else {
        console.warn("test fail", result.reason);
      }

      client.on("user-unpublished", this.handleUserUnPublished);
      client.on("connection-state-changed", async function (connectionState, info) {
        console.warn('房间连接状态变化', connectionState, info)
        if (connectionState == 'CONNECTED') {
          const localTracks = await QNRTC.createMicrophoneAndCameraTracks();//这个localTracks  是不是音视频一块推上去了
          for (const track of localTracks) {
            if (track.isVideo()) {
              that.playUserTracks([track]);
            }
          }
          await client.publish(localTracks);
        }
      })
      await client.join(res)

    },
    async handleUserPublished(userID, tracks) {
      try {
        const { videoTracks, audioTracks } = await client.subscribe(tracks);
        this.playUserTracks([...videoTracks, ...audioTracks]);
      } catch (e) {
        alert(e.message, "warning");
      }
    },
    playUserTracks(tracks) {
      console.warn('tracks', tracks)
      for (const track of tracks) {
        if (track.isAudio()) {
          track.play(document.body)
        } else {
          const div = document.createElement("div");
          if (track.trackID) div.id = track.trackID;
          const remotetracks = document.getElementById("remotetracks");
          remotetracks.appendChild(div);
          track.play(div)
        }
      }
    },
    handleUserUnPublished(userID, tracks) {
      for (const track of tracks) {
        let div = document.getElementById(track.trackID);
        if (div) div.remove();
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.mainV {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  

  .mainT {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;

    i {
      font-size: 32px;
      color: #67C23A;
      display: inline-block;
      margin-left: 20px;
    }

    p {
      width: 120px;
      text-align: center;
    }

    div {
      margin-right: 20px;
    }
  }

  .meetV {
    margin-top: 80px;
    width: 100vw;
    min-height: calc(100vh - 80px);
  }

}
</style>